import React, {Component} from 'react'
import {StyleSheet, Dimensions, Animated} from 'react-native'
import PropTypes from 'prop-types'
import Spinner from './Spinner'

const { height, width } = Dimensions.get('window')
const toastWidth = width * 0.7

class Loading extends Component {
  static propTypes = {
    show: PropTypes.bool
  };

  static defaultProps = {
    show: false
  };

  constructor (props) {
    super(props)
    this.state = {
      fadeAnim: new Animated.Value(0.4)
    }
  }

  render () {
    const opacity = {
      opacity: this.state.fadeAnim
    }
    if (!this.props.show) { return null }
    return (
      <Animated.View style={[styles.container, this.props.style, opacity]}>
        <Spinner />
      </Animated.View>
    )
  }
}

const styles = StyleSheet.create({
  container: {
    position: 'absolute',
    backgroundColor: 'rgba(0,0,0,0.8)',
    borderRadius: 5,
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center',
    width: toastWidth,
    left: (width - toastWidth) / 2,
    top: (height - 60) / 2,
    padding: 20
  },
  text: {
    flex: 1,
    color: 'white',
    fontSize: 16,
    textAlign: 'center'
  }
})

export default Loading
